<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖函数</title>
		<style type="text/css">
			.output{
				background: #00BFFF;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<input id='search' type="text" placeholder="请输入内容" />
		<div id="searchCon" class="output"></div>
		<script type="text/javascript">
			//
			function debounce(fn,wait=1000){
				var timeout;
				return function(){
					if(timeout){
						clearTimeout(timeout)
					}
					timeout = setTimeout(fn,wait)
				}
			}
		</script>
		<script type="text/javascript">
			var search = document.querySelector("#search");
			var searchCon = document.querySelector("#searchCon")
			
			function output(e){
				searchCon.innerHTML = search.value
			}
			
			search.addEventListener('keyup',debounce(output,1000))
		</script>
	</body>
</html>
